<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
  import { defineComponent, PropType, Ref, ref, watchEffect } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import * as MathUtil from '/@/utils/MathUtil';

  export default defineComponent({
    name: 'ContrastBar',
    props: {
      width: {
        type: String as PropType<string>,
        default: '100%',
      },
      height: {
        type: String as PropType<string>,
        default: '200px',
      },
      dataList: {
        type: Array as PropType<any[]>,
        required: true,
      },
      unit: {
        type: String as PropType<string>,
        default: '',
      },
    },
    setup(props) {
      const chartRef = ref<HTMLDivElement | null>(null);
      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);


      const renderItem = (params: any, api: any) => {
        const echartsWidth = api.getWidth();
        const echartsHeight = api.getHeight();
        const barHeight = echartsHeight * 0.35;
        const barWidth = echartsWidth * 0.12;
        const centerY = echartsHeight * 0.5;
        const leftPadding = echartsWidth * 0.15;
        const barGap = echartsWidth * 0.25;

        const values = props.dataList.flatMap((item) => item.item.map((subItem: any) => subItem.value));

        const maxValue = Math.max(...values);
        const heightList = values.map((v) => barHeight * (v / maxValue));

        const bar1X = leftPadding + barGap;
        const bar2X = bar1X + barGap;

        return {
          type: 'group',
          children: [
            {
              type: 'line',
              shape: {
                x1: leftPadding,
                y1: centerY,
                x2: echartsWidth - leftPadding,
                y2: centerY,
              },
              style: {
                stroke: '#E5E6EB',
                lineWidth: 1,
              },
            },
            {
              type: 'text',
              style: {
                text: props.dataList[0].title,
                x: leftPadding,
                y: centerY - 20,
                textBaseline: 'middle',
                fontSize: 14,
                fill: '#1D2129',
                fontWeight: 500,
              },
            },
            {
              type: 'rect',
              shape: {
                x: bar1X,
                y: centerY - heightList[0],
                width: barWidth,
                height: heightList[0],
                r: [5, 5, 0, 0],
              },
              style: { fill: '#383A85' },
            },
            {
              type: 'text',
              style: {
                text: MathUtil[props.dataList[0].item[0].formatter.split('|')[0]](
                  props.dataList[0].item[0].value,
                  props.dataList[0].item[0].formatter.split('|')[1]
                ),
                x: bar1X + barWidth / 2,
                y: centerY - heightList[0] - 15,
                textAlign: 'center',
                fill: '#1D2129',
                fontSize: 14,
                fontWeight: 500,
                textBaseline: 'middle',
              },
            },
            {
              type: 'text',
              style: {
                text: props.dataList[0].item[0].name,
                x: bar1X + barWidth / 2,
                y: centerY - heightList[0] - 35,
                textAlign: 'center',
                fontSize: 12,
                // fill: "#4E5969",
                textBaseline: 'middle',
                fontWeight: 500,
              },
            },
            {
              type: 'rect',
              shape: {
                x: bar2X,
                y: centerY - heightList[1],
                width: barWidth,
                height: heightList[1],
                r: [5, 5, 0, 0],
              },
              style: { fill: '#FF8D23' },
            },
            {
              type: 'text',
              style: {
                text: MathUtil[props.dataList[0].item[1].formatter.split('|')[0]](
                  props.dataList[0].item[1].value,
                  props.dataList[0].item[1].formatter.split('|')[1]
                ),
                x: bar2X + barWidth / 2,
                y: centerY - heightList[1] - 15,
                textAlign: 'center',
                fill: '#1D2129',
                fontSize: 14,
                fontWeight: 500,
                textBaseline: 'middle',
              },
            },
            {
              type: 'text',
              style: {
                text: props.dataList[0].item[1].name,
                x: bar2X + barWidth / 2,
                y: centerY - heightList[1] - 35,
                textAlign: 'center',
                fontSize: 12,
                // fill: "#4E5969",
                textBaseline: 'middle',
                fontWeight: 500,
              },
            },
            {
              type: 'text',
              style: {
                text: props.dataList[1].title,
                x: leftPadding,
                y: centerY + 20,
                textBaseline: 'middle',
                fontSize: 14,
                fill: '#1D2129',
                fontWeight: 500,
              },
            },
            {
              type: 'rect',
              shape: {
                x: bar1X,
                y: centerY,
                width: barWidth,
                height: heightList[2],
                r: [0, 0, 5, 5],
              },
              style: { fill: '#A89EC3' },
            },
            {
              type: 'text',
              style: {
                text: MathUtil[props.dataList[1].item[0].formatter.split('|')[0]](
                  props.dataList[1].item[0].value,
                  props.dataList[1].item[0].formatter.split('|')[1]
                ),
                x: bar1X + barWidth / 2,
                y: centerY + heightList[2] + 10,
                textAlign: 'center',
                fill: '#1D2129',
                fontSize: 14,
                fontWeight: 500,
                textBaseline: 'middle',
              },
            },
            // {
            //   type: "text",
            //   style: {
            //     text: props.dataList[1].item[0].name,
            //     x: bar1X + barWidth / 2,
            //     y: centerY + heightList[2] + 30,
            //     textAlign: "center",
            //     fontSize: 12,
            //     fill: "#4E5969",
            //     textBaseline: "middle"
            //   }
            // },
            {
              type: 'rect',
              shape: {
                x: bar2X,
                y: centerY,
                width: barWidth,
                height: heightList[3],
                r: [0, 0, 5, 5],
              },
              style: { fill: '#FDA757' },
            },
            {
              type: 'text',
              style: {
                text: MathUtil[props.dataList[1].item[1].formatter.split('|')[0]](
                  props.dataList[1].item[1].value,
                  props.dataList[1].item[1].formatter.split('|')[1]
                ),
                x: bar2X + barWidth / 2,
                y: centerY + heightList[3] + 10,
                textAlign: 'center',
                fill: '#1D2129',
                fontSize: 14,
                fontWeight: 500,
                textBaseline: 'middle',
              },
            },
            // {
            //   type: "text",
            //   style: {
            //     text: props.dataList[1].item[1].name,
            //     x: bar2X + barWidth / 2,
            //     y: centerY + heightList[3] + 30,
            //     textAlign: "center",
            //     fontSize: 12,
            //     fill: "#4E5969",
            //     textBaseline: "middle"
            //   }
            // }
          ],
        };
      };

      const getOption = () => {
        return {
          responsive: true,
          grid: {
            top: '10%',
            left: '15%',
            right: '15%',
            bottom: '10%',
          },
          graphic: [
            {
              type: 'text',
              style: {
                text: props.unit,
              },
            },
          ],
          yAxis: {
            show: false,
          },
          xAxis: {
            show: false,
          },
          series: [
            {
              type: 'custom',
              renderItem: renderItem,
              data: [1],
              silent: true,
            },
          ],
        };
      };

      watchEffect(() => {
        setOptions(getOption());
      });

      return { chartRef };
    },
  });
</script>

<style lang="less" scoped>
  .echarts {
    width: 100% !important;
    height: 100% !important;
  }
</style>
